<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/main.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/product/shop_car.css">



    <title>商品列表-搜索</title>
</head>

<body>
    <div id="app" v-cloak>
<headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <p class="shop_car_tit fl">购物车</p>
            <searchs></searchs>

        </div>

        <div class="wrap car_all">
            <div class="car_all_num fl">
                全部商品（{{car_all_num}}）
            </div>
            <div class="car_address fr">
                <span class="fl">配送地：</span>
                <select class="check_address fl">
                    <option value="volvo">天津</option>
                </select>
            </div>
        </div>

        <div class="car_nav wrap">
            <div class="all_nav fl">
                <!-- <input type="checkbox" class="shop_checkbox"> -->
                <span class="checked_box shop_checkbox checker_top fl" :class="{checked_true:all_select}" @click='all_check'></span>
                <label>全选</label>
            </div>
            <div class="shop_style fl">
                规格
            </div>
            <div class="danjia_nav fl">
                单价
            </div>
            <div class="unit_price text_center fl">
                数量
            </div>
            <div class="unit_price fl">
                小计
            </div>
            <div class="unit_price fl">
                操作
            </div>
        </div>

        <div class="shop_item wrap" v-for="(shop,index) in car_list" @click.capture='mp(index)'>
            <div class="shop_name">
                <div class="all_nav fl">
                    <!-- <input type="checkbox" class="shop_checkbox" @click.capture='shop_cleck(index)'> -->
                    <span class="checked_box shop_checkbox fl checker_top" :class="{checked_true:shop.selected}" @click.capture='shop_cleck(index)'></span>
                    <label>{{shop.mercName}}</label>
                </div>
                <select class="check_ticket fl">
                    <option value="volvo" v-for='(coupons,index) in shop.coupons'>满{{coupons.spendMoney}}减{{coupons.couponMoney}}</option>
                </select>
            </div>
            <div class="shop_detail" v-for="(item,index) in shop.cartGoods">
                <div class="all_nav fl">
                    <!-- <input type="checkbox" class="shop_checkbox detail_input fl"> -->
                    <span class="checked_box fl" :class="{checked_true:item.itemselected}" @click.capture='item_cleck(index)'></span>
                    <div class="detail_img fl">
                        <img :src="item.goodsImgs" alt="">
                    </div>
                    <p class="detail_name">{{item.goodsName}}</p>
                    
                </div>
                <div class="shop_style fl">
                    <p>{{item.sku}} &nbsp;</p>
                </div>
                <div class="danjia_nav fl">
                    <p>￥{{item.goodsPrice}}</p>  
                    <p class="old_price">￥{{item.oldGoodsPrice}}</p>  
                    <!-- <select class="check_ticket">
                        <option value="volvo">50元优惠券</option>
                    </select> -->
                </div>
                <div class="unit_price fl">
                    <el-input-number v-model="item.goodsQuantity" @change="handleChange(item)" size="mini" :min="1" :max="10000" label=""></el-input-number>
                </div>
                <div class="unit_price fl">
                    <p class="product_money">￥{{item.goodsTotalPrice}}</p>
                    <p class="send_money">邮费：￥{{item.dispatchPrice}}</p>
                </div>
                <div class="unit_price fl cursor" @click='del_item(item.id)'>
                    删除
                </div>
            </div>
            
        </div>

        <div class="wrap shop_settlement">
            <div class="all_footer fl">
                <!-- <input type="checkbox" class="shop_checkbox">
                <label>全选</label> -->
            </div>
            <div class="del_product fl cursor" @click='del_checked'>删除选中的商品</div>
            <div class="fl clear_shop_car cursor" @click='esc'>清空购物车</div>
            <div class="fr">
                <div class="choose_num fl">已选 <span>{{all_num}}</span> 件商品</div>
                <div class="yunfei fl">运费：￥{{all_dispatchPrice}}</div>
                <div class="zongjia fl">总价：<span>￥{{allPrice}}</span></div>
                <div class="fl qujiesuan cursor" @click='jiesuan()'>去结算</div>
            </div>
        </div>
       
        <div class="you_like wrap">
            <div class="you_like_tit">猜你喜欢</div>
            <div class="">
                <div class="like_item fl" v-for='(item,index) in fondMdse'>
                    <div class="like_product cursor" @click='product_detail(item.id)'>
                        <img :src="item.coverImg" alt="">
                    </div>
                    <p class="product_introduce">{{item.spuName}}</p>
                    <div class="product_price">
                        <div class="now_price fl">
                            <span>￥</span>{{item.showPrice}}
                        </div>
                        <div class="sell_num fr">
                            销量<span>{{item.salesQuantity}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
 

    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.js"></script>         <script src="../js/qs.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    fondMdse:'',
                    checked1:false,
                    nums: 1,
                    product_num:3,
                    car_list:'',
                    car_all_num:0,
                    Index:'',
                    allPrice:0,
                    del_arr:[],
                    all_select:false,
                    all_num:0,
                    all_dispatchPrice:0,
                    shopCartId:''
                };
            },
            components: {

            },
            mounted() {
                this.scl()
                this.tops()
                this.fondMdses()
                if (localStorage.getItem('wACCESS_TOKEN')==null) {
                    this.$message.error('请登录');
                }
            },
            methods: {
                // 

                jiesuan(){
                    if (this.shopCartId ==''||this.shopCartId == undefined ||this.shopCartId == null) {
                        app.$message.error('请勾选商品');
                    }else{
                        window.location.href='shop_Settlement.html?id='+this.shopCartId
                    }
                },

                // 刷新页面回到顶部
                tops(){
                    scrollTo(0,0);
                },
                
                handleChange(value) {
                    var shopCartId = value.id
                    var i = value.goodsQuantity
                    value.goodsTotalPrice = value.goodsQuantity*value.goodsPrice
                    console.log(value)
                    axios({
                        method:"POST",
                        url:base_url + "/sc/iodscg",
                        data:Qs.stringify({
                            shopCartId:shopCartId,
                            i:i
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.price()
                        console.log(res)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                product_detail(id){
                    window.location.href='product_detail.html?id='+id
                },
                // 购物车列表
                scl(){
                    axios({
                        method:"POST",
                        url:base_url + "/sc/scl",
                        data:Qs.stringify({
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.car_list = res.data.data.list.map(function(item) {
                            let newItem=item
                            newItem.myindex=''
                            newItem.selected=false
                            newItem.cartGoods
                            for (let i = 0; i < newItem.cartGoods.length; i++) {
                                newItem.cartGoods[i].itemselected=false
                            }
                            return  newItem
                        });
                        // 计算总数
                        app.car_all_num = 0
                        for (let i = 0; i < app.car_list.length; i++) {
                            app.car_all_num +=  res.data.data.list[i].cartGoods.length
                        }
                        app.item_num()
                        app.item_dispatchPrice()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 冒泡事件获取所引致
                mp(index){
                    this.Index = index
                },

                // 选中单个商品
                item_cleck(index){
                    if (app.car_list[this.Index].cartGoods[index].itemselected==false) {
                        app.car_list[this.Index].cartGoods[index].itemselected = true
                    }else if (app.car_list[this.Index].cartGoods[index].itemselected==true) {
                        app.car_list[this.Index].cartGoods[index].itemselected = false
                    }

                    //商品全部选中，店铺才选中
                    var select=true;
                    for(var i=0;i<app.car_list[this.Index].cartGoods.length;i++){
                        select*=app.car_list[this.Index].cartGoods[i].itemselected;					
                    }
                    if(select==true){
                        app.car_list[this.Index].selected=true;
                    }else {
                        app.car_list[this.Index].selected=false
                    };
                    // 判断商品是否全部选中，是的话，全选也选中
                    var all = true
                    for (let x = 0; x < app.car_list.length; x++) {
                        all*=app.car_list[x].selected
                    }
                    if (all==1) {
                        this.all_select = true
                    }else{
                        this.all_select = false
                    }
                    app.price()
                    app.item_num()
                    app.item_dispatchPrice()
                },


                // 店铺选中
                shop_cleck(index){
                    if (this.car_list[index].selected==false) {
                        this.car_list[index].selected=true
                        for (let i = 0; i < this.car_list[index].cartGoods.length; i++) {
                            app.car_list[index].cartGoods[i].itemselected = true
                        }
                    } else if (this.car_list[index].selected==true) {
                        this.car_list[index].selected = false
                        for (let j = 0; j < this.car_list[index].cartGoods.length; j++) {
                            app.car_list[index].cartGoods[j].itemselected = false
                        }
                    }
                    // 判断商品是否全部选中，是的话，全选也选中
                    var all = true
                    for (let x = 0; x < app.car_list.length; x++) {
                        all*=app.car_list[x].selected
                    }
                    if (all==1) {
                        this.all_select = true
                    }else{
                        this.all_select = false
                    }
                    app.price()
                    app.item_num()
                    app.item_dispatchPrice()
                },
                // 计算价格
                price(){		
                    var all=0;
                    var shopCartId = ''
                    for(var j=0;j<this.car_list.length;j++){//点击循环有多少个商家
                        var arr=this.car_list[j].cartGoods;//获取商家下面的列表产品
                        for(var i=0;i<arr.length;i++){//循环产品列表
                            if(arr[i].itemselected===true){//列表里面那些为true
                                all+=arr[i].goodsPrice*arr[i].goodsQuantity//为true的价格加起来，为总价
                                shopCartId +=arr[i].id+','
                            }
                        }
                    }
                    app.allPrice = all.toFixed(2)
                    shopCartId = shopCartId.substring(0, shopCartId.lastIndexOf(','));
                    this.shopCartId = shopCartId
                },
                // 删除
                del_item(id){
                    this.$confirm('是否删除商品', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        axios({
                            method:"POST",
                            url:base_url + "/sc/dscgs",
                            data:Qs.stringify({
                                goodsIds:id
                            }),
                            headers:{
                                'Content-Type':'application/x-www-form-urlencoded',
                                "TOKEN": localStorage.getItem("wACCESS_TOKEN")
                            }
                        })
                        .then(function (res) {
                            app.scl()
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                    });
                    
                },
                del_checked(){
                    var del_arr=''
                    for(var j=0;j<this.car_list.length;j++){//点击循环有多少个商家
                        var arr=this.car_list[j].cartGoods;//获取商家下面的列表产品
                        for(var i=0;i<arr.length;i++){//循环产品列表
                            if(arr[i].itemselected===true){//列表里面那些为true
                                del_arr += arr[i].id+','
                            }
                        }
                    }
                    this.del_arr = del_arr
                    console.log(this.del_arr)
                    axios({
                        method:"POST",
                        url:base_url + "/sc/dscgs",
                        data:Qs.stringify({
                            goodsIds:this.del_arr
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN": localStorage.getItem("wACCESS_TOKEN")
                        }
                    })
                    .then(function (res) {
                        app.scl()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

                },
                // 全选
                all_check(){
                    if ( app.all_select==false) {
                        for(var j=0;j<this.car_list.length;j++){//点击循环有多少个商家
                            this.car_list[j].selected = true
                            var arr=this.car_list[j].cartGoods;//获取商家下面的列表产品
                            for(var i=0;i<arr.length;i++){//循环产品列表
                                arr[i].itemselected = true
                            }
                        }
                        app.all_select = true
                    }else{
                        for(var j=0;j<this.car_list.length;j++){//点击循环有多少个商家
                            this.car_list[j].selected = false
                            var arr=this.car_list[j].cartGoods;//获取商家下面的列表产品
                            for(var i=0;i<arr.length;i++){//循环产品列表
                                arr[i].itemselected = false
                            }
                        }
                        app.all_select = false
                    }
                    
                    app.item_num()
                    app.price()
                    app.item_dispatchPrice()
                },
                // 计算数量
                item_num(){
                    var num = 0
                    for(var j=0;j<this.car_list.length;j++){//点击循环有多少个商家
                        var arr=this.car_list[j].cartGoods;//获取商家下面的列表产品
                        for(var i=0;i<arr.length;i++){//循环产品列表
                            if (arr[i].itemselected == true) {
                                num += arr[i].goodsQuantity
                            }
                        }
                    }
                    app.all_num = num
                },
                // 计算运费
                item_dispatchPrice(){
                    var num = 0
                    for(var j=0;j<this.car_list.length;j++){//点击循环有多少个商家
                        var arr=this.car_list[j].cartGoods;//获取商家下面的列表产品
                        for(var i=0;i<arr.length;i++){//循环产品列表
                            if (arr[i].itemselected == true) {
                                num += arr[i].dispatchPrice
                            }
                        }
                    }
                    app.all_dispatchPrice = num
                },
                // 清空购物车
                
                esc(){
                    console.log(this.del_arr)
                    axios({
                        method:"POST",
                        url:base_url + "/sc/esc",
                        data:Qs.stringify({
                            userId:localStorage.getItem('userId')
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN": localStorage.getItem("wACCESS_TOKEN")
                        }
                    })
                    .then(function (res) {
                        app.scl()
                        app.item_num()
                        app.item_dispatchPrice()
                        console.log(res.data)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                    app.all_select = false

                },
                // 猜你喜欢
                fondMdses(){
                    axios({
                        method:"POST",
                        url:base_url + "/web/mdse/fondMdse",
                        data:Qs.stringify({
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.fondMdse = res.data.data.fondMdse
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },

                // del_show(index){
                // }
            }
        })
    </script>
</body>

</html>